<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入Bootstrap样式表 -->
<link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="<c:url value = "/resources/css/home.css"/>">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap">
<title>首页</title>

<style>
/* 设置整体背景 */
body {
	background-image:
		url('https://th.bing.com/th/id/R.72be151df029db893dd53205cf6c2c11?rik=YrpEsMNMvUmXdA&pid=ImgRaw&r=0');
	/* 替换为实际的背景图片路径 */
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

/* 样式化其他元素 */
.navbar {
	/* 设置导航栏的样式，以确保其在背景上可见 */
	background-color: rgba(0, 0, 0, 0.7); /* 使用半透明颜色以防止背景过于突兀 */
}

/* 导航栏设计 */
.navbar {
  background-color: #000000; /* 黑色背景 */
}

.navbar-brand,
.navbar-nav .nav-link {
  color: #fff; /* 白色文字 */
}

.navbar-brand:hover,
.navbar-nav .nav-link:hover {
  color: #ffa500; /* 鼠标悬停时的橙色 */
}

/* 切换按钮样式 */
.navbar-toggler-icon {
  background-color: #fff; /* 切换按钮的颜色 */
}

/* 搜索框样式 */
.form-control {
  background-color: transparent; /* 透明背景 */
  color: #fff; /* 白色文字 */
  border: 1px solid #fff; /* 白色边框 */
}

/* 搜索按钮样式 */
.btn-outline-light {
  color: #fff; /* 白色文字 */
  border: 1px solid #fff; /* 白色边框 */
}

.btn-outline-light:hover {
  background-color: #ffa500; /* 鼠标悬停时的橙色背景 */
  color: #fff; /* 白色文字 */
}

/* 首页设计 */
.jumbotron {
  height: 200px;
  background: #fdfcfb; /* 背景色 */
  color: #333; /* 文字颜色 */
  text-align: center; /* 文字居中 */
  padding: 20px; /* 内边距 */
  border-radius: 10px; /* 边框圆角 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
 
}

/* 标题样式 */
.jumbotron h1 {
  font-size: 3.0em; /* 标题字体大小 */
  margin-bottom: 10px; /* 底边距 */
}

/* 副标题样式 */
.jumbotron p.lead {
  font-size: 1.5em; /* 副标题字体大小 */
  margin-bottom: 20px; /* 底边距 */
}

/* 分隔线样式 */
.jumbotron hr {
  border-top: 2px solid #333; /* 分隔线颜色和宽度 */
  margin: 20px 0; /* 分隔线上下外边距 */
}





/* fotter设计 */
footer {
  background-color: #000000; /* 黑 色背景 */
  color: #fff; /* 白色文字 */
  padding: 15px; /* 上下左右各留出15px的空白 */
  text-align: center; /* 文字居中 */
  font-size: 14px; /* 字体大小 */
}

/* 可选：添加悬停效果 */
footer:hover {
  background-color: #555; /* 鼠标悬停时的背景色 */
}

/* 可选：调整字体样式 */
footer a {
  color: #007bff; /* 链接颜色为蓝色 */
  text-decoration: none; /* 链接无下划线 */
  font-weight: bold; /* 加粗字体 */
}

footer a:hover {
  text-decoration: underline; /* 链接悬停时显示下划线 */
}






</style>


</head>
<body>

	<!-- 导航栏 -->
	<nav class="navbar navbar-expand-lg ">
		<a class="navbar-brand" href="#">书影音</a>
		<button class="navbar-toggler" type="button" data-toggle="collapse"
			data-target="#navbarNav" aria-controls="navbarNav"
			aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarNav">
			<ul class="navbar-nav mr-auto">
				<li class="nav-item active"><a class="nav-link"
					href="<c:url value = "/home"/>">首页 <span class="sr-only">(current)</span></a>
				</li>
				<li class="nav-item"><a class="nav-link"
					href="<c:url value = "/book"/>">读书</a></li>
				<li class="nav-item"><a class="nav-link"
					href="<c:url value = "/movie"/>">影视</a></li>
				<li class="nav-item"><a class="nav-link"
					href="<c:url value = "/music"/>">音乐</a></li>
					<li class="nav-item"><a class="nav-link"
					href="<c:url value = "/filter"/>">筛选</a></li>	
				<li class="nav-item"><a class="nav-link" 
				    href="<c:url value = "/user"/>">我的</a></li>
			</ul>
			<form class="form-inline my-2 my-lg-0 " method="POST" action = "<c:url value = "/search"/>">
				<input class="form-control mr-sm-2 bg-transparent" type="search"  name="title" placeholder="搜索"
					aria-label="搜索">
				<button class="btn btn-outline-light my-2 my-sm-0 " type="submit">搜索</button>
			</form>
		</div>
	</nav>



	<!-- 首页 -->
	<div class="jumbotron " style="height: 200px;background: #fdfcfb">
		<h1 class="display-4 "><c:if test="${not empty user }">${user.username },</c:if>欢迎来到书影音</h1>
		<p class="lead">在这里，您可以探索最新的图书、电影和音乐。 开始您的旅程！</p>
		<hr class="my-4">

	</div>
	<br>
<div class="card" style="width: 900px; margin: 0 auto; height: 100px; position: relative;">
    <img class="card-img-top rounded" src="resources/读书.png" alt="加载中" style="height: 100%; width: 100%;">
    <div class="card-body" style="position: absolute; bottom: 0; right: 0;">
        <a href="<c:url value = '/book'/>" class="card-link">更多书籍</a>
    </div>
</div>



	<c:forEach items="${mediaList1}" var="media">
		<div class="container mt-3">
			<div class="media border p-3" style="position: relative;">
				<img src="${media.imageUrl }" alt="${media.title}"
					class="mr-3 mt-3" style="width: 90px;">
				<div class="media-body">
					<h4>
						<c:out value="${media.title}" />
						<small><i> </i></small>
						<c:out value="${media.releaseDate}" />
						评分：
						<c:out value="${media.averageRating}" />
					</h4>
					<p>
						<c:out value="${media.description}" />
					</p>
				</div>
				<div style="position: absolute; bottom: 0; right: 0;">
					<a href="<c:url value = "/${media.id}"/>" class="card-link">查看评价详情</a>
				</div>
			</div>
		</div>
		
		<br>
	</c:forEach>


	<br>

	<hr>

	<div class="card" style="width: 900px; margin: 0 auto; height: 100px; position: relative;">
    <img class="card-img-top rounded" src="resources/电影.png" alt="加载中" style="height: 100%; width: 100%;">
    <div class="card-body" style="position: absolute; bottom: 0; right: 0;">
        <a href="<c:url value = '/book'/>" class="card-link">更多电影</a>
    </div>
</div>

	<br>
	<c:forEach items="${mediaList2}" var="media">
		<div class="container mt-3">
			<div class="media border p-3" style="position: relative;">
				<img src="${media.imageUrl }" alt="${media.title}"
					class="mr-3 mt-3" style="width: 90px;">
				<div class="media-body">
					<h4>
						<c:out value="${media.title}" />
						<small><i> </i></small>
						<c:out value="${media.releaseDate}" />
						评分：
						<c:out value="${media.averageRating}" />
					</h4>
					<p>
						<c:out value="${media.description}" />
					</p>
				</div>
				<div style="position: absolute; bottom: 0; right: 0;">
					<a href="<c:url value = "/${media.id}"/>" class="card-link">查看评价详情</a>
				</div>
			</div>
		</div>
		
		<br>
	</c:forEach>
	<br>
	<hr>


	<div class="card" style="width: 900px; margin: 0 auto; height: 100px; position: relative;">
    <img class="card-img-top rounded" src="resources/音乐.png" alt="加载中" style="height: 100%; width: 100%;">
    <div class="card-body" style="position: absolute; bottom: 0; right: 0;">
        <a href="<c:url value = '/book'/>" class="card-link">更多音乐</a>
    </div>
</div>


	<br>
	<c:forEach items="${mediaList3}" var="media">
		<div class="container mt-3">
			<div class="media border p-3" style="position: relative;">
				<img src="${media.imageUrl }" alt="${media.title}"
					class="mr-3 mt-3" style="width: 90px;">
				<div class="media-body">
					<h4>
						<c:out value="${media.title}" />
						<small><i> </i></small>
						<c:out value="${media.releaseDate}" />
						评分：
						<c:out value="${media.averageRating}" />
					</h4>
					<p>
						<c:out value="${media.description}" />
					</p>
				</div>
				<div style="position: absolute; bottom: 0; right: 0;">
					<a href="<c:url value = "/${media.id}"/>" class="card-link">查看评价详情</a>
				</div>
			</div>
		</div>
		<br>
	</c:forEach>
	<br>
	<br>
	<!-- 页脚 -->
	<footer class=" text-center py-3"> &copy;
		2023 书影音 </footer>
		
	

	<!-- 引入Bootstrap的JavaScript和Popper.js，用于处理导航栏的交互效果 -->
	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
	<script
		src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
	<script
		src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</body>
</html>




